<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-card style="margin-bottom: 20px;margin-top: 20px;">
          <!-- 搜索栏 -->
          <el-row type="flex" justify="space-between">
            <el-col :span="16">
              <el-button type="primary" @click="isShowDialog=true">添加客户</el-button>
            </el-col>
            <el-col :span="4">
              <el-select v-model="allVal" placeholder="全部经纪" @change="allBroker">
                <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-input v-model="searchVal" placeholder="请输入关键字" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="dimSearch">
                  筛选
                </el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <!-- 表格 -->
          <el-table border :data="formData">
            <el-table-column label="图片" align="center">
              <template #default="{row}">
                <img
                  v-fiximg="require('@/assets/common/bigUserHeader.png')"
                  :src="row.image "
                  alt=""
                  class="staffPhoto"
                  style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
                >
              </template>
            </el-table-column>
            <el-table-column label="名称" align="center" prop="name" />
            <el-table-column label="邮箱" align="center" prop="email" />
            <el-table-column
              label="电话"
              align="center"
              prop="phone"
            />
            <el-table-column
              label="经纪"
              align="center"
              prop="agent.name"
            />
            <el-table-column
              label="微信"
              align="center"
              prop="wechat"
            />
            <el-table-column
              label="介绍"
              align="center"
              prop="desc"
            />
            <el-table-column label="操作" fixed="right" width="280" align="center">
              <template #default="{row}">
                <el-button type="primary" @click="upClients(row.id)">编辑</el-button>
                <el-button type="danger" @click="delClients(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <el-pagination
              layout="prev, pager, next"
              :page-size="page._limit"
              :total="total"
              @current-change="numChange"
            />
          </el-row>
        </el-card>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog :title="`${clientsList.id?'编辑':'新增'}客户`" :visible="isShowDialog" @close="btnCancel">
        <!-- 表单组件  el-form   label-width设置label的宽度   -->
        <!-- 匿名插槽 -->
        <el-form ref="addForm" :model="clientsList" :rules="rules" label-width="120px">
          <el-form-item label="经纪" prop="agent">
            <el-select v-model="clientsList.agent" placeholder="选择经纪">
              <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select></el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="clientsList.name" style="width:80%" placeholder="请输入名字" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="clientsList.email" style="width:80%" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="clientsList.phone" style="width:80%" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="微信" prop="wechat">
            <el-input v-model="clientsList.wechat" style="width:80%" placeholder="请输入微信" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="clientsList.desc" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item label="封面">
            <ImageUpload ref="clientsPhoto" />
          </el-form-item>
        </el-form>
        <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
        <el-row slot="footer" type="flex" justify="center">
          <!-- 列被分为24 -->
          <el-col :span="6">
            <el-button type="primary" size="small" @click="btnOk">确定</el-button>
            <el-button size="small" @click="btnCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getClientsList, getClientsNum, getClientsById, getAgents, upClients, addClients, delClients } from '@/api/customer'
export default {
  data() {
    return {
      total: 0,
      allVal: '',
      formData: [],
      isShowDialog: false,
      clientsList: {
        id: '',
        name: '',
        desc: '',
        image: '',
        agent: '',
        email: '',
        phone: '',
        wechat: ''
      },
      page: {
        _limit: 5,
        _start: 0
      },
      agentsList: [],
      searchVal: '',
      rules: {
        name: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '用户姓名为1-50位' }],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
        email: [{ required: true, message: '邮件不能为空', trigger: 'blur' }],
        wechat: [{ required: true, message: '请输入微信号码', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
        agent: [{ required: true, message: '请选择一个经纪人', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getClientsList()
  },
  methods: {
    // 分页
    async numChange(page) {
      this.page._start = (page - 1) * this.page._limit
      if (this.allVal) {
        this.page.agent = this.allVal
      }
      if (this.searchVal) {
        this.page.name_contains = this.searchVal
      }
      const res = await getClientsList(this.page)
      this.formData = res.data
    },
    // 封装函数更新页面
    async getClientsList() {
      // 获取用户数量
      const arr = await getClientsNum()
      //   console.log(arr.data, '1')
      this.total = arr.data
      console.log(this.total)
      //   console.log(this.total, 'num')
      // 获取用户数据
      const res = await getClientsList(this.page)
      this.formData = res.data
      //   console.log(this.formData, '2')
      const { data } = await getAgents({
        _limit: 100,
        _start: 0
      })
      //   console.log(data, 121)
      this.agentsList = data
      // console.log(this.agentsList)
    },
    // 选择经纪查询数据
    async allBroker() {
    //   console.log(this.allVal)
      this.searchVal = ''
      if (!this.allVal) {
        this.page._start = 0
        this.getClientsList()
      } else {
        this.page._start = 0
        const { data } = await getClientsList({
          ...this.page,
          agent: this.allVal
        })
        const arr = await getClientsNum({
          ...this.page,
          agent: this.allVal
        })
        //   console.log(arr.data, '1')
        this.total = arr.data
        //   console.log(data)
        this.formData = data
      }
    },
    // 搜索框事件
    async dimSearch() {
      this.allVal = ''
      console.log(this.searchVal)
      if (!this.searchVal) {
        this.page._start = 0
        this.getClientsList()
      } else {
        this.page._start = 0
        const { data } = await getClientsList({
          ...this.page,
          name_contains: this.searchVal
        })
        const arr = await getClientsNum({
          ...this.page,
          name_contains: this.searchVal
        })
        //   console.log(arr.data, '1')
        this.total = arr.data
        this.formData = data
      }
    },
    // 删除事件
    async delClients(id) {
    //   console.log(id)
      try {
        await this.$confirm('确定删除该用户吗?')
        await delClients(id)
        this.$message.success('删除成功')
        this.getClientsList()
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑回显数据
    async upClients(id) {
      this.isShowDialog = true
      const { data } = await getClientsById(id)
      console.log(data, 1111)
      this.clientsList = data
      this.$refs.clientsPhoto.fileList = [{ url: this.clientsList.image }]
    },
    // 弹窗确定事件
    async btnOk() {
      const fileList = this.$refs.clientsPhoto.fileList
      console.log(fileList)
      if (fileList[0] && fileList[0].status !== 'success') {
        this.$message.warning('图片正在上传,请等待')
        return
      }
      if (this.clientsList.id) {
        await this.$refs.addForm.validate()
        await upClients({
          ...this.clientsList,
          image: fileList[0] ? fileList[0].url : ''
        })
        this.$message.success('编辑成功')
        // this.$refs.clientsPhoto.fileList = []
        this.getClientsList()
        this.isShowDialog = false
      } else {
        await this.$refs.addForm.validate()
        await addClients({
          ...this.clientsList,
          image: fileList[0] ? fileList[0].url : ''
        })
        this.$message.success('添加成功')
        // this.$refs.clientsPhoto.fileList = []
        this.getClientsList()
        this.isShowDialog = false
      }
    },
    // 弹窗取消
    btnCancel() {
      this.$refs.addForm.resetFields()
      this.$refs.clientsPhoto.fileList = []
      this.clientsList = {
        id: '',
        name: '',
        desc: '',
        image: '',
        agent: '',
        email: '',
        phone: '',
        wechat: ''
      }
      this.isShowDialog = false
    }
  }
}
</script>

<style >
</style>
